<template>
	<view class="my-navbar" :style="{ backgroundColor }">
		<uni-nav-bar 
			:left-icon="leftIcon"
			:right-icon="rightIcon"
			:right-text="rightText" 
			:title="title"
			:color="color"
			:border="border"
			:backgroundColor="backgroundColor"
			@click-left="goBack"
			@click-right="clickRight"
		>
			<template v-slot:default>
				<view class="nav-bar-title" :style="{ color }">{{ title || currentPage.$page.meta.navigationBar.titleText }}</view>
			</template>
			<template v-if="!leftIcon" v-slot:left>
				<image class="nav-bar-back" :src="arrowLeft"></image>
			</template>
		</uni-nav-bar>
	</view>
	<view class="space"></view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue';
	
	const props = defineProps({
		title: {
			type: String,
			default: '',
		},
		leftIcon: {
			type: String,
			default: '',
		},
		rightIcon: {
			type: String,
			default: '',
		},
		rightText: {
			type: String,
			default: '',
		},
		color: {
			type: String,
			default: '#242424',
		},
		border: {
			type: Boolean,
			default: false,
		},
		clickRight: {
			type: Function,
			default: () => (null),
		},
		backgroundColor: {
			type: String,
			default: '#FFFFFF',
		},
	});
	
	const pages = getCurrentPages();
	const currentPage = pages[pages.length - 1];
	
	// 箭头icon
	const arrowLeft = computed<string>(() => {
		const white = ['#fff', '#ffffff', '#FFF', '#FFFFFF'];
		return white.includes(props.color) ? '/static/images/common/arrow-left-white.png' : '/static/images/common/arrow-left.png';
	});
	
	// 返回上一页
	const goBack = (): void => {
		uni.navigateBack();
	};
</script>

<style lang="scss">
	.my-navbar {
		width: 100%;
		height: calc(44px + var(--status-bar-height));
		background: #FFFFFF;
		position: fixed;
		z-index: 100;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
	}
	.space {
		height: calc(44px + var(--status-bar-height));
	}
	.nav-bar-title {
		width: 100%;
		line-height: 44px;
		font-size: 36rpx;
		font-weight: 500;
		color: #242424;
		text-align: center;
	}
	.nav-bar-back {
		width: 35rpx;
		height: 34rpx;
		display: block;
		margin-left: 20rpx;
	}
</style>